<!DOCTYPE html>
<html lang="en">
<!--    课程：黑马程序员  《4个小时带你快速入门vue》
        地址：https://www.bilibili.com/video/BV12J411m7MG -->
<!-- P17 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>指令v-model获取设置表单值</title>
</head>

<body>
    <!-- v-model = "数据变量"
    获取和设置表单元素的值(双向数据绑定)
 -->
    <div id="app">
        <!-- 修改输入框内容，下面文本同步更新，验证了双向数据绑定 -->
        <h2>验证了v-mode指令的双向数据绑定</h2>
        message：<input type="text" v-model="message" @keyup.enter="getMsg">
        <input type="button" value="修改message" @click="setMsg">
        <h3>回显： {{message}}</h3>

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="./js/vuev2.7.14.js"></script>

    <script>
        var app = new Vue({
            // 通过el属性将 vue实例挂载到div元素的内部
            el: '#app', //这里使用了 css的id选择器（符号#） 来命中dom元素。推荐使用id选择器
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                getMsg: function () {
                    alert(this.message)
                },
                setMsg: function () {
                    this.message = "酷丁鱼"
                }
            }
        })
    </script>


</body>

<!-- 总结
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<一一>表单元素的值  双向绑定
-->
</html>